import React from 'react'
import {Image, ScrollView, Text} from "react-native";
import Flex from "@ant-design/react-native/es/flex/Flex";
import WhiteSpace from "@ant-design/react-native/es/white-space/index";
import Icon from "@ant-design/react-native/es/icon/index";
import List from "@ant-design/react-native/es/list/index";
import InputItem from "@ant-design/react-native/es/input-item/index";
import Button from "@ant-design/react-native/es/button/index";
import CameraButton from "../../contants/CameraButton";
import WingBlank from "@ant-design/react-native/es/wing-blank/index";

export default class PersonEditPage extends React.Component {
  state = {
    headImg: 'https://org.modao.cc/uploads4/images/3133/31336283/v2_pnxd2q.png'
  }

  onFileUpload = (file, fileName) => {
    this.setState({headImg: file})
    console.log(file)
    console.log(fileName)
  }

  render() {
    return <ScrollView style={{height: '100%', backgroundColor: '#fff'}}>
      <CameraButton
        photos={[]}
        onFileUpload={this.onFileUpload}>
        <Flex style={{height: 100, padding: 10}} direction={'row'} justify='between'>
          <Text style={{fontSize: 18}}>头像</Text>
          <Flex style={{width: '40%'}}>
            <Image source={{uri: this.state.headImg}}
                   style={{height: 80, width: 80}}/>
            <Icon name='right' style={{marginLeft: 20}} size={'lg'}/>
          </Flex>
        </Flex>
      </CameraButton>
      <List>
        <InputItem value="张三">姓名</InputItem>
        <InputItem value="17868803265">手机号</InputItem>
      </List>
      <WhiteSpace size='lg'/>
      <WingBlank>
        <Button type={'primary'}>确定修改</Button>
      </WingBlank>
    </ScrollView>
  }
}